<template>
	<view class="mail" style="height: 100%;
			display: flex;
			flex-direction: column;
			background-color: #009EF0;
			background: url('../../../static/image/background1.png') no-repeat center;
			background-size: cover;">
		<view class="title">通讯录查询</view>
		<view class="searchinput">
			<uni-icons type="search" size="20" color="#fff"></uni-icons>
			<input class="uni-input" confirm-type="search" placeholder="搜索" @blur="searchuser" type="text" :value="inputsearch" />
		</view>
		<scroll-view class="maillist scroll-Y" scroll-y="true">
			<uni-collapse accordion style="border-top:none;margin: 0;">
				<uni-collapse-item v-for="(item) in maillist" :key="item.departmentId" :name="item.departmentId" @click.native="usermessage(item.departmentId)"
				 :title="item.departmentName" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png" style="font-size:12px;color: #fff;background-color: #124699;">
					<view class="user" v-for="(user,index) in departuser" :key="index" @click="touserinfo(user.userID)" :name="user.userID">
						<image class="userimg" />
						<text style="color: #fff;border-bottom: 1px solid #ccc;">{{ user.userName }}</text>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</scroll-view>
	</view>
</template>

<script>
	import uniCollapse from "@/components/uni-collapse/uni-collapse.vue";
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue";
	import uniIcons from "@/components/uni-icons/uni-icons";
	import {
		ajax
	} from "../../../api/apis";
	export default {
		data() {
			return {
				inputsearch: "",
				maillist: [],
				// mailID:"",
				departuser: [],
				departmentparametes: {
					page: 1,
					size: 50,
					workUnitId: 1
				},
				query: {
					departmentName: "",
					userName: ""
				}
			};
		},
		components: {
			uniCollapse,
			uniCollapseItem,
			uniIcons
		},
		methods: {
			touserinfo(mailid) {
				let _this = this;
				// _this.mailID=mailid
				console.log(mailid)
				uni.navigateTo({
					url: "../mailinfo/mailinfo?userID=" + mailid
				})
			},
			usermessage(departmentID) {
				const _this = this;
				console.log(departmentID);
				this.departuser = [];
				ajax({
					url: "/user/getSimpleUserByDepartmentID?departmentID=" + departmentID,
					method: "POST",
					success: res => {
						_this.departuser = res.data.data;
					}
				});
			},
			getdepartmentlist() {
				const _this = this;
				let departmentparametes = this.departmentparametes;
				ajax({
					url: "/department/listDepartmentInfo",
					method: "POST",
					data: {
						"page": 1,
						"size": 999
					},
					success: res => {
						console.log(res.data.data);
						let date = res.data.data.list;
						_this.maillist = date.filter(item => item.departmentName != "string");
					}
				});
			},
			searchuser(e) {
				let _this = this;
				_this.inputsearch = e.detail.value;
				let searchvalue = _this.inputsearch;
				_this.query.departmentName = searchvalue;
				if (searchvalue == "") {
					_this.getdepartmentlist();
				} else {
					ajax({
						url: "/department/findList",
						method: "POST",
						data: {
							departmentName: _this.query.departmentName
						},
						success: res => {
							console.log(res);
							if (res.data.state == 1 && res.data.data.length !== 0) {
								_this.maillist = res.data.data;
							} else if (res.data.data.length == 0) {
								_this.query.userName = searchvalue;

								ajax({
									url: "/user/findList",
									method: "POST",
									data: {
										userName: _this.query.userName
									},
									success: res => {
										console.log(res.data.data[0].userID)
										uni.navigateTo({
											url: "../mailinfo/mailinfo?userID=" + res.data.data[0].userID
										})
									}
								})
							}
						}
					});
				}
			}
		},
		mounted() {
			this.getdepartmentlist();
		}
	};
</script>

<style less scoped>
	uni-page-body {
		height: 100%;
	}

	.mail {
		height: 100%;
		background-color: none;
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 16px;
		padding: 15px;
		color: #fff;
		text-align: center;
		background: url("../../../static/image/navbg.png") no-repeat center;
	}

	.searchinput {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 22px;
		border: 1px solid #ccc;
		border-radius: 50px;
		margin: 8px auto;
		width: 80%;
	}

	.uni-input {
		font-size: 12px;
		text-align: center;
		color: #fff;
	}

	.maillist {
		flex: 1;
		/* padding: 0 22px; */
		background: none;
		box-sizing: border-box;
	}
	.maillist>>>.uni-collapse[data-v-b183f2e2]{
		background-color: rgb(0,0,0,0);
	}
	.maillist>>>.uni-collapse-cell__title[data-v-05a53ffd]{
		padding: 12px 0;
	}
	.user {
		display: flex;
		justify-content: left;
		align-items: center;
		background: #124699;
	}

	.userimg {
		width: 26px;
		height: 26px;
		background-color: #f60;
		margin: 5px 20px;
		border-radius: 50%;
	}
</style>
